<template>
	<div class="p-5 flex flex-col space-y-2">
		<div class="space-y-3">
			<div class="font-bold p-1 border-b">企业信息</div>
			<div class="flex">
				<div class="flex-1">
					<div class="grid-cell">
						<div>
							<div>名称</div>
							<div>{{ companyInfo.name }}</div>
						</div>
						<div>
							<div>法人</div>
							<div>{{ companyInfo.legal }}</div>
						</div>
						<div>
							<div>联系人</div>
							<div>{{ companyInfo.contact }}</div>
						</div>
						<div>
							<div>联系电话</div>
							<div>{{ companyInfo.phone }}</div>
						</div>

						<div>
							<div>备注</div>
							<div>{{ companyInfo.intro }}</div>
						</div>
						<div>
							<div>店铺总数</div>
							<div>{{ companyInfo.totalstores }}</div>
						</div>
						<div class="col-span-3">
							<div>地址</div>
							<div>{{ companyInfo.areaName }} {{ companyInfo.address }}</div>
						</div>
					</div>
				</div>
				<div v-if="companyInfo.thumbFile" class="w-[200px] h-[200px]">
					<img
						:src="companyInfo.thumbFile"
						class="cursor-pointer w-full h-full object-contain"
						@click="imgPreview([companyInfo.thumbFile])"
					/>
				</div>
			</div>
		</div>
	</div>

	<div class="px-5">
		<div class="font-bold p-1">服务器信息</div>
		<div class="text-sm">
			<div class="flex items-center mt-3">
				<div class="w-24 text-right pr-5">域名</div>
				<div class="flex-1"><ypinput v-model="formData.host" placeholder="请输入域名"></ypinput></div>
			</div>
			<div class="flex items-center mt-3">
				<div class="w-24 text-right pr-5">IP</div>
				<div class="flex-1"><ypinput v-model="formData.ip" placeholder="请输入IP"></ypinput></div>
			</div>
			<div class="flex items-center mt-3">
				<div class="w-24 text-right pr-5">端口</div>
				<div class="flex-1"><ypinput v-model="formData.port" placeholder="请输入端口"></ypinput></div>
			</div>
			<div class="flex items-center mt-3">
				<div class="w-24 text-right pr-5">管理员账号</div>
				<div class="flex-1"><ypinput v-model="formData.username" placeholder="请输入管理员账号"></ypinput></div>
			</div>
			<div class="flex items-center mt-3">
				<div class="w-24 text-right pr-5">管理员密码</div>
				<div class="flex-1">
					<ypinput v-model="formData.password" placeholder="请输入管理员密码" type="password"></ypinput>
				</div>
			</div>
			<div class="flex items-center mt-3">
				<div class="w-24 text-right pr-5">确认密码</div>
				<div class="flex-1">
					<ypinput
						v-model="formData.passwordAgain"
						placeholder="请再次输入管理员密码"
						type="password"
					></ypinput>
				</div>
			</div>
			<div class="flex items-center mt-3">
				<div class="w-24 text-right pr-5">备注</div>
				<div class="flex-1"><yptextarea v-model="formData.remark" placeholder="请输入备注"></yptextarea></div>
			</div>
		</div>
	</div>
	<div class="flex justify-center py-3 space-x-2">
		<button class="btn btn-hong" type="button" @click="saveInfo">
			<i class="ri-save-line ri-lg pr-1"></i>
			保存
		</button>
		<button class="btn" type="button" @click="closeDlg">
			<i class="ri-arrow-go-back-line ri-lg pr-1"></i>
			返回
		</button>
	</div>
</template>

<script setup>
	import { ref, reactive, onMounted } from 'vue'
	import { useRouter } from 'vue-router'
	import { getData, postData, alter } from '@/common/base'
	import { imgPreview } from '@/components/utils'
	const props = defineProps({
		companyId: {
			type: Number,
			required: true
		}
	})

	const emits = defineEmits(['close'])
	const router = useRouter()
	const isLoad = ref(false)
	const companyInfo = ref({})

	const formData = reactive({
		host: '',
		ip: '',
		port: '',
		username: '',
		password: '',
		passwordAgain: '',
		remark: '',
		company_id: props.companyId,
		id: ''
	})

	const getInfo = async () => {
		try {
			const resp = await getData('company/read', { id: props.companyId })
			if (resp.code == 1) {
				companyInfo.value = resp.data
				Object.assign(formData, companyInfo.value.companyServer)
				if (companyInfo.value.companyServer.password) {
					formData.passwordAgain = companyInfo.value.companyServer.password
				}
			}
			isLoad.value = true
		} catch (error) {
			isLoad.value = true
		}
	}

	const saveInfo = async () => {
		if (!formData.id) {
			delete formData.id
		}
		const resp = await postData('company/updateServer', formData)
		if (resp.code) {
			alter({ type: 'alter-success', text: resp.msg })
			emits('close')
		}
	}

	const closeDlg = () => {
		emits('close')
	}
	onMounted(() => {
		getInfo()
	})
</script>
<style scoped>
	.grid-cell {
		@apply grid grid-cols-3 text-sm;
	}
	.grid-cell > div {
		@apply flex space-x-1 p-1;
	}
	.grid-cell > div > div:nth-child(1) {
		@apply w-16;
	}
	.grid-cell > div > div:nth-child(2) {
		@apply text-gray-600 flex-1;
	}
</style>
